<template>
  <div></div>
</template>

<script setup>
import {
  // 天地图矢量图层
  TiandiMap_vec,
  // 天地图影像图层
  TiandiMap_img,
} from "../../libs/mapBase";

onMounted(() => {
  /* 获取地图map */
  let $map = inject("$map");

  /* 导航控件 */
  const nav = new ol.control.ZoomToExtent({
    extent: [100, 30, 140, 30],
  });
  $map.addControl(nav);

  /* 放大缩小控件 */
  const zoomslider = new ol.control.ZoomSlider();
  $map.addControl(zoomslider);

  /* 鼠标位置控件 */
  const mousePositionControl = new ol.control.MousePosition({
    //坐标格式
    coordinateFormat: ol.coordinate.createStringXY(4),
    //地图投影坐标系（若未设置则输出为默认投影坐标系下的坐标）
    projection: "EPSG:4326",
    //坐标信息显示样式类名，默认是'ol-mouse-position'
    className: "custom-mouse-position",
    //显示鼠标位置信息的目标容器
    target: document.getElementById("mouse-position"),
    //未定义坐标的标记
    undefinedHTML: "&nbsp;",
  });
  $map.addControl(mousePositionControl);

  /* 比例尺控件 */
  const scaleLineControl = new ol.control.ScaleLine({
    //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
    units: "metric",
  });
  $map.addControl(scaleLineControl);

  /* 鹰眼控件 */
  const overviewMapControl = new ol.control.OverviewMap({
    /* 鹰眼控件样式  */
    className: "ol-overviewmap ol-custom-overviewmap",
    layers: [TiandiMap_img, TiandiMap_vec],
    /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
    collapseLabel: "\u00BB",
    /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
    label: "\u00AB",
    /* 初始为隐藏显示方式 */
    collapsed: true,
    view: new ol.View({
      projection: "EPSG:4326",
      minZoom: 8,
      maxZoom: 18,
    }),
  });
  $map.addControl(overviewMapControl);

  /* 全屏控件 */
  const fullScreen = new ol.control.FullScreen();
  $map.addControl(fullScreen);
});
</script>

<style lang="scss" scoped></style>
